<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<!--
 Looks like putting a correct DOCTYPE at the start stops lines from
 displaying on Firefox. may be related to mime/type. Strange. -- haniotak

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-->

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>ESnet Network Weather Map</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" href="lib/slider/css/bluecurve/bluecurve.css" />
    <link rel="icon" type="image/png" href="images/favicon.ico" />
	<link rel="shortcut icon"  type="image/png" href=”images/favicon.ico” />
    <script type="text/javascript">
       if (navigator.userAgent.indexOf("MSIE") != -1) {
           window.location = "index-flex.html";
       }
    </script>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyAalDKqKSzLnMRAdI6mJt7BJFPUuhiyFhU&amp
            type="text/javascript"></script>

    <!-- weathermap.es.net key: ABQIAAAATMLCskmLwPkWymY7xbb8eRQpqcY0i6OAM19wxNHZfelWgiGQtBSN7vmxqFPNYwIxu7pCOQ2AXUBqvA -->
    <script src="src/weathermap.js" type="text/javascript"></script>
    <script src="src/topology.js" type="text/javascript"></script>
    <script src="lib/PolylineEncoder.js" type="text/javascript"></script>
    <script src="src/renderer.js" type="text/javascript"></script>
    <script src="src/metrics.js" type="text/javascript"></script>
    <script src="src/path.js" type="text/javascript"></script>
    <script src="lib/labeledmarker.js" type="text/javascript"></script>
    <script src="lib/arrow.js" type="text/javascript"></script>
    <script src="src/bezier.js" type="text/javascript"></script>
    <script type="text/javascript" src="lib/slider/js/range.js"></script>
    <script type="text/javascript" src="lib/slider/js/timer.js"></script>
    <script type="text/javascript" src="lib/slider/js/slider.js"></script>
  </head>

  <body onload="initialize()" onunload="GUnload()">
  <div id="content">
    <span id="ruler"></span>
    <div id="header"><img src="images/weathermap.png"></img></div>
    <div id="closeButtonDiv">
    	<input id="closeButton" type="button" value="X" onclick="javascript:window.open('', '_self', '');window.close();"/>
    </div>
    <div id="topControls">
        <fieldset>
            <div id="refreshDiv">
               <input title="Refreshes map, keeping current status.  Image refreshes every 30 seconds automatically" id="refreshButton" class="refreshButton" type="button" value="REFRESH" onclick="refreshPage();"></td>      
           </div>
           <div id="refreshTimeDiv">
               Last refreshed: <span id="refreshTime">starting</span>
            </div>
        </fieldset>
    </div>
    <div id="toolbar">
		<span id="sidebarViewToggle" class="min" title="Hide sidebar"><a href="javascript:toggleFullScreen(false)"></a></span>
    </div>
    <div id="map_canvas"></div>
    <div id="sidebar">
        <div id="serverErrorPopup" class="sidebarSection" style="display:none">
        </div>
        <div>
            <table class="waitPopup">
                <tr>
                    <td align="center"><img src="images/wait24trans.gif" id="waitImage"/></td>
                    <td id="waitText" align="center">Please wait for data to load.</td>
                </tr>
            </table>
        </div>
        <div id="options">
            <table>
                <tr>
                    <td>Options</td>
                    <td id="optionToggle" class="tableMin">
                      <a href="javascript:toggleOptions()"></a>
                    </td>
                </tr>
            </table>
            <form id="form" action="" >
            <ul class="noBullet" id="optionList">
                <li>
                  <fieldset>
                    <legend title="Control information displayed about network usage">Level of Utilization</legend>
                    <select title="Color links based on the percentage used, the percentage reserved by OSCARS, or the Mbps utilized" name="metricsDD" onchange="metricSelection()" onkeyup="metricSelection()">
                        <option value="0">Percentage </option>
                        <option value="1">% Reserved</option>
                        <option value="2" selected="selected">In Mbps</option>
                    </select>
                    <select title="Select the average or maximum usage over the specified time period" name="metricsType" onchange="metricTypeSelection()" onkeyup="metricTypeSelection()">
                        <option value="0" selected="selected">Average</option>
                        <option value="1">Maximum</option>
                    </select>
                    <table class="sliderTable"  border="0" cellspacing="5">
                    <tr>
                        <td>
                            Over last
                            <input title="Show average or maximum metrics for a period up to one hour" id="aggrValue" class="sliderValue" />
                            <span id=aggregation">minutes</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                         <div class="slider" id="aggrSlider" tabIndex="1">
                        <input class="slider-input" id="aggrSliderInput"/>
                        </div>
                        </td>
                    </tr>
                    </table>
                    <div class="sliderTicks" id="aggrTicks">
                    </div>
                  </fieldset>
                </li><br/>
                <li>
                  <fieldset>
                    <legend title="Display information about a specific OSCARS circuit">Oscars Circuit</legend>
                    <select title="Select OSCARS circuit based on its reservation id" name="circuitDD" onchange="circuitSelection()" onkeyup="circuitSelection()">
                         <option value="none">None</option>
                     </select>
                   </fieldset>
                </li><br/>
                <li>
                  <fieldset>
                    <legend title="Control the visibility of various features of the map">Visibility</legend>
                    <table>
                    <tr>
                    <td colspan="2">
                    <input title="Whether to display labels for markers" type="checkbox" id="labelsCheckbox" onclick="toggleLabels();" checked="checked" />Labels
                    </td>
                    </tr>
                    <tr>
                    <td>
                    <input title="Whether to display IP connections" type="checkbox" id="ipCheckbox" onclick="toggleIp();"/>IP
                    </td>
                    <td>
                    <input title="Whether to display SDN connections" type="checkbox" id="sdnCheckbox" onclick="toggleSdn();"/>SDN
                    </td>
                    </tr>
                    <tr>
                    <td>
                    <input title="Whether to display customer sites" type="checkbox" id="sitesCheckbox" onclick="toggleSites();"/>Labs
                    </td>
                    <td>
                    <input title="Whether to display network peers" type="checkbox" id="peersCheckbox" onclick="togglePeers();"/>Peers
                    </td>
                    </tr>
                    <tr>
                    <td colspan="2">
                    <input title="Display only network peers and routers connected to them" type="checkbox" id="peersOnlyCheckbox" onclick="togglePeersOnly(false);"/>Peers only
                    </td>
                    </tr>
                    <tr>
                    <td colspan="2">
                    <input title="Display a non-geographical view of the network" type="checkbox" id="lvCheckbox" onclick="toggleLogicalView();"/>Logical view
                    </td>
                    </tr>
                    </table>
                  </fieldset>
                </li>
            </ul>
            </form>
        </div>
        <div id="history" class="sidebarSection">
            <table>
                <tr>
                    <td>Playback</td>
                    <td id="playbackToggle" class="tableMax" title="Show playback options">
                      <a href="javascript:togglePlayback()"></a>
                    </td>
                </tr>
            </table>
            <form id="playbackForm" style="display:none">
                <table id="playbackTable" border="0" cellspacing="5">
                    <tr>
                        <td title="Current time in animation" id="animationTime" colspan="2">
                            Stopped
                        </td>
                    </tr>
                    <tr>
                        <td>Last</td>
                        <td>
                        <select title="Currently only one time period selectable" name="timePeriod">
                            <option value="day" selected="selected">Day</option>
                        </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input title="Start animation; playback will not start immediately" id="playButton" class="playButton" type="button" value="PLAY" onclick="playbackHistory();" />
                        </td>
                        <td>
                            <input title="Step to next frame in animation" id="stepButton" class="stepButton" type="button" value="STEP" onclick="stepLoop();" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input title="Stop animation at a specific frame" id="pauseButton" class="pauseButton" type="button" value="PAUSE" onclick="pauseLoop();" />
                        </td>
                        <td>
                            <input title="Stop animation" id="stopButton" class="stopButton" type="button" value="STOP" onclick="stopLoop();" />
                        </td>
                    </tr>
                </table>
            </form>
            <div id="loadingPlaybackPopup" style="display:none">
                <table class="waitPopup">
                    <tr>
                        <td align="center">Please wait</td>
                        <td align="center"><img src="images/wait24trans.gif" /></td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- for compatibility with Flash version -->
        <div id="altmap_canvas" name="altmap_canvas">
         </div>
        <div id="sidebarBottom">
            <div id="keyUtildiv" class="sidebarSection" style="display:none">
                <table>
                    <tr>
                        <td>Utilization</td>
                        <td id="percentToggle" class="tableMin" title="Hide legend">
		                        <a href="javascript:toggleUtilLegend()"></a>
                        </td>
                    </tr>
                </table>
                <table title="Map of colors to percentage of link used; note that the default is for the average over the last 30 seconds" id="percentTable" border="0" cellspacing="5">
                <tr>
                  <td class="key" style="background-color: #990033;"/>
                  <td>50-100%</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #CC3333;"/>
                  <td>40-50%</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #FF9933;"/>
                  <td>30-40%</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #FFFF00;"/>
                  <td>20-30%</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #99FF00;"/>
                  <td>10-20%</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #009900;"/>
                  <td>5-10%</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #0066CC;"/>
                  <td>0-5%</td>
                </tr>
                </table>
            </div>

            <div id="keyMbpsdiv" class="sidebarSection">
                <table>
                    <tr>
                        <td>Utilization</td>
                        <td id="mbpsToggle" class="tableMin">
		                        <a href="javascript:toggleUtilLegend()"></a>
                        </td>
                    </tr>
                </table>
                <table title="Map of colors to Mbps used; note that the default is for the average over the last 30 seconds" id="mbpsTable" border="0" cellspacing="5">
                <tr>
                  <td class="key" style="background-color: #990033;"/>
                  <td>>10000 Mbps</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #CC3333;"/>
                  <td>5000-10000</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #FF9933;"/>
                  <td>1000-5000</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #FFFF00;"/>
                  <td>500-1000</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #99FF00;"/>
                  <td>250-500</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #009900;"/>
                  <td>100-250</td>
                </tr>
                <tr>
                  <td class="key" style="background-color: #0066CC;"/>
                  <td>0-100</td>
                </tr>
                </table>
            </div>
            <div id="markerDiv" class="sidebarSection">
                <table>
                    <tr>
                        <td>Markers</td>
                        <td id="markerToggle" class="tableMin">
		                        <a href="javascript:toggleMarkerLegend()"></a>
                        </td>
                    </tr>
                </table>
                <table id="markers" border="0" cellspacing="0" cellpadding=".2em">
                    <tr>
                        <td title="customer site"><img src="markers/siteIcon.png"/></td>
                        <td>Lab</td>
                        <td title="group of customer sites"><img src="markers/siteAggr.png"/></td>
                        <td>Labs</td>
                    </tr>
                    <tr>
                        <td title="network peer"><img src="markers/peerIcon.png"/></td>
                        <td>Peer</td>
                        <td title="group of network peers"><img src="markers/peerAggr.png"/></td>
                        <td>Peers</td>
                    </tr>
                    <tr>
                        <td title="router"><img src="markers/routerIcon.png"/></td>
                        <td>Router</td>
                        <td title="group of routers"><img src="markers/hubIcon.png"/></td>
                        <td>Routers</td>
                    </tr>
                    <tr>
                        <td title="group of labs and routers"><img src="markers/routerSiteAggr.png"/></td>
                        <td colspan="3">Labs/routers</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="footer">
       <div class="post">
           <p>Welcome to the beta version of the ESnet weathermap.</p>
           <h3><a href="http://code.google.com/p/esnet-weathermap/wiki/WeathermapHelp" target="_blank">Help</a></h3>

           <h3>Browser</h3>

           <p>To view, please allow JavaScript on your browser. Tested browsers include Firefox and Safari.</p>

           <h3>Contacts</h3>

           <p>Sowmya Balasubramanian (sowmya at es.net)</p>
           <hr/>
           <h3>Notices</h3>
        <p>
        <a href="http://www.es.net/" target="_blank">ESnet</a> |
        <a href="http://www.lbl.gov/" target="_blank">Berkeley Lab</a> |
        <a href="http://www.lbl.gov/Disclaimers.html" target="_blank">Notice to Users</a> |
        <a href="thirdParty.html" target="_blank">Acknowledgements</a>
        </p>
       </div>
    </div>
    <div style="clear:both;"></div>
  </div>
  </body>
</html>
